<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      vloading="formLoading"
      label-width="auto"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="老人姓名" prop="elder.name">
            <el-input
              v-model="formData.elder.name"
              placeholder="请输入老人姓名"
              :clearable="true"
              :disabled="true"
            />
            <el-button @click="clickChooseElder">选择老人</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额" prop="rechargeFee">
            <InputNumber v-model="formData.rechargeFee" placeholder="请输入金额" type="decimal" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费方式" prop="payType">
            <el-select v-model="formData.payType" placeholder="请输入缴费方式">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.FEE_PAY_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              /> </el-select
            >>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费时间" prop="payTime">
            <el-date-picker
              v-model="formData.payTime"
              placeholder="请输入缴费时间"
              :clearable="true"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="费用说明" prop="description">
            <el-input
              v-model="formData.description"
              placeholder="请输入费用说明"
              :clearable="true"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :disabled="formLoading" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
  <ElderInfoSelect ref="elderInfoSelectRef" @row-dblclick="handleSelectElderInfo" />
</template>
<script setup name="FeeRechargeCreate" lang="ts">
import { InputNumber } from '@/components/InputNumber'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as FeeRechargeApi from '@/api/fee/feeRecharge'
import * as FeeRechargeDetailModel from '@/model/fee/recharge/FeeRechargeDetail'
const elderInfoSelectRef = ref()
const message = useMessage()
const { t } = useI18n()
const dialogTitle = ref('')
const dialogVisible = ref(false)
const formRef = ref()
const formLoading = ref(false)
const formData = ref({
  elderId: undefined,
  elder: { name: '', identityCard: '' },
  rechargeFee: undefined,
  payType: 1,
  payTime: undefined,
  description: undefined
})
const formRules = reactive({
  'elder.name': [{ required: true, message: '请选择老人', trigger: 'blur' }],
  payTime: [{ required: true, type: 'date', message: '请选择缴费时间', trigger: 'blur' }]
})
/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    elderId: undefined,
    elder: { name: '', identityCard: '' },
    rechargeFee: undefined,
    payType: 1,
    payTime: undefined,
    description: undefined
  }
  formRef.value?.resetFields()
}

const emit = defineEmits(['success'])
/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  const data = formData.value as unknown as FeeRechargeDetailModel.FeeRechargeDetail
  await FeeRechargeApi.create(data)
  message.success(t('common.createSuccess'))
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success')
}

const handleSelectElderInfo = (selectElderInfo) => {
  formData.value.elder.name = selectElderInfo.name
  formData.value.elder.identityCard = selectElderInfo.identityCard
  formData.value.elderId = selectElderInfo.id
}
const clickChooseElder = () => {
  elderInfoSelectRef.value.open()
}
</script>
